<!DOCTYPE html>
<html>

<head>
    <title>学生列表 - 学生成绩管理系统</title>
    <link rel="stylesheet" href="/static/css/home.css">
    <link rel="stylesheet" href="/static/css/list.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav class="top-nav">
        <div class="nav-content">
            <a href="/" class="logo">学生成绩管理系统</a>
            <div class="user-info">
                <span class="welcome-text">欢迎，{{ request.user.username }}</span>
                <a href="{% url 'accounts:logout' %}" class="logout-btn">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <main class="main-content">
            <h1 class="page-title">学生管理</h1>

            <div class="action-bar">
                <div class="search-box">
                    <input type="text" placeholder="搜索学生..." />
                </div>
                <a href="{% url 'students:student_add' %}" class="btn-primary">
                    <i class="fas fa-plus"></i>添加学生
                </a>
            </div>

            <div class="card-grid">
                {% for student in students %}
                <div class="data-card">
                    <div class="card-header">
                        <div>
                            <h3 class="card-title">{{ student.name }}</h3>
                            <div class="card-subtitle">{{ student.student_id }}</div>
                        </div>
                        <span class="status-tag status-active">在读</span>
                    </div>
                    <div class="card-content">
                        <div class="info-row">
                            <span class="info-label">班级：</span>
                            <span class="info-value">{{ student.class_name }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">性别：</span>
                            <span class="info-value">{{ student.get_gender_display }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">入学日期：</span>
                            <span class="info-value">{{ student.admission_date|date:"Y-m-d" }}</span>
                        </div>
                    </div>
                    <div class="card-actions">
                        <a href="{% url 'students:student_detail' student.pk %}" class="btn-action btn-view">
                            <i class="fas fa-eye"></i> 查看
                        </a>
                        <a href="{% url 'students:student_edit' student.pk %}" class="btn-action btn-edit">
                            <i class="fas fa-edit"></i> 编辑
                        </a>
                        <a href="{% url 'students:student_detail' student.pk %}#delete" class="btn-action btn-delete">
                            <i class="fas fa-trash"></i> 删除
                        </a>
                    </div>
                </div>
                {% empty %}
                <div class="no-data">暂无学生信息</div>
                {% endfor %}
            </div>

            {% if students.has_other_pages %}
            <div class="pagination">
                {% if students.has_previous %}
                <a href="?page={{ students.previous_page_number }}">&laquo; 上一页</a>
                {% endif %}

                {% for i in students.paginator.page_range %}
                <a href="?page={{ i }}" {% if students.number == i %}class="active" {% endif %}>{{ i }}</a>
                {% endfor %}

                {% if students.has_next %}
                <a href="?page={{ students.next_page_number }}">下一页 &raquo;</a>
                {% endif %}
            </div>
            {% endif %}
        </main>
    </div>
</body>

</html>